import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/layout/index.vue'
import Test from '@/views/test/index.vue'
// import storage from '@/utils/storage'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Layout,
    redirect: '/discover', // 发现页/主页
    children: [
      {
        path: 'discover',
        name: 'Discover',
        component: () => import('@/views/discover/index'),
        meta: { title: '发现' }
      }
    ]
  },
  {
    path: '/rank', // 歌单排行榜分类
    component: Layout,
    children: [
      {
        path: '',
        name: 'rank',
        component: () => import('@/views/rank/index'),
        meta: { title: '排行榜' }
      }
    ]
  },
  {
    path: '/ranklist/:id', // 歌单排行榜信息
    component: Layout,
    children: [
      {
        path: '',
        name: 'ranklist',
        component: () => import('@/views/ranklist/index'),
        meta: { title: '排行榜' }
      }
    ]
  },
  {
    path: '/playlist-square', // 歌单广场
    component: Layout,
    // name: 'playlist-square',
    // component: () => import('@/views/playlist-square/index')
    children: [
      {
        path: '',
        name: 'playlist-square',
        component: () => import('@/views/playlist-square/index'),
        meta: { title: '歌单广场' }
      }
    ]
  },
  {
    path: '/playlist/:id', // 歌单信息
    component: Layout,
    children: [
      {
        path: '',
        name: 'playlist',
        component: () => import('@/views/playlist/index'),
        meta: { title: '歌单' }
      }
    ]
  },
  {
    path: '/album/:id', // 专辑信息
    component: Layout,
    children: [
      {
        path: '',
        name: 'album',
        component: () => import('@/views/album/index'),
        meta: { title: '歌单' }
      }
    ]
  },
  {
    path: '/mv',
    component: Layout,
    children: [
      {
        path: '',
        name: 'mv',
        component: () => import('@/views/mv/index'),
        meta: { title: 'MV' }
      }
    ]
  },
  {
    path: '/search/:keywords', // 搜索
    component: Layout,
    children: [
      {
        path: '',
        name: 'search',
        component: () => import('@/views/search/index')
      }
    ]
  },
  {
    path: '/test', // 测试
    component: Test
  }
]

const router = new VueRouter({
  // mode: 'history',
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

// 扩展 transitionName 属性、维护一个 history 栈(以后可能会用到)
router.beforeEach((to, from, next) => {
  // const history = storage.getItem('history')
  if (router.isBack) {
    router.transitionName = 'route-back'
    router.isBack = false
    // history.splice(history.length - 1, 1)
  } else {
    router.transitionName = 'route-forward'
    // history.push(to.path)
  }

  // storage.setItem('history', history)
  // console.log(storage.getItem('history'))

  next()
})

// 扩展 router
router.goBack = function () {
  router.isBack = true
  router.back()
}

export default router
